<template>
  <div id="reserve">
    <flexbox :gutter="0">
      <flexbox-item :span="1/4" @click.native="selectTab(item)" v-for="item in tabList" :key="item.id">
        <div :class="{true:'top-select',false:'top-block'}[item.select]">{{mytime[item.id]}}</div>
      </flexbox-item>
      <flexbox-item :span="1/4">
        <div class="top-block"></div>
      </flexbox-item>
      <flexbox-item :span="1/8">
        <datetime @on-confirm="setTime" v-model="select" @on-clear="setToday">
          <div class="top-block">
            <div class="left-line">
              <i class="iconfont icon-rili"></i>
            </div>
          </div>
        </datetime>
      </flexbox-item>
      <flexbox-item :span="1/8">
        <div class="top-block"><i class="iconfont icon-shaixuan"></i></div>
      </flexbox-item>
    </flexbox>
    <div class="block">
      <flexbox class="content">
        <flexbox-item :span="1/5">
           <div class="picture">
          <img src="../assets/img/timg.png" width="60px" />
        </div>
        </flexbox-item>
        <flexbox-item :span="4/5">
          <div class="desc">
          <p class="one">演示会议室<span>坐席20人</span></p>
          <p>如何使用请查看会议室预约教程</p>
          <p>会议室地点：如何使用请查看会议预约教程</p>
        </div>
        </flexbox-item>
      </flexbox>
      <scroller class="scroller" lock-y scrollbar-x :bounce=false>
        <div class="box1">
          <div class="box1-item" v-for="i in 15" :key="i">
            <divider class="time-block">{{mytime[2]}}&nbsp;{{i+7}}:00</divider>
            <flexbox :gutter="4">
              <flexbox-item v-if="(mytime[0]==nowtime[0])" v-for="(item,index) in timeList" :key="index">
                <div class="child" v-if="(i+7>nowtime[1])">
                  {{item.type}}
                </div>
                <div class="child" v-if="(i+7==nowtime[1]&index>nowtime[2])">
                  {{item.type}}
                </div>
                <div class="childed" v-if="(i+7==nowtime[1]&&index<nowtime[2])">
                  <i class="iconfont icon-jinyong"></i>
                </div>
                <div class="childed" v-if="(i+7<nowtime[1])">
                  <i class="iconfont icon-jinyong"></i>
                </div>
              </flexbox-item>
              <flexbox-item v-if="(mytime[0]!=nowtime[0])" v-for="(item,index) in timeList" :key="index">
                <div class="child">
                  {{item.type}}
                </div>
              </flexbox-item>
            </flexbox>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<style lang='less'>
  #reserve {
    .time-block {
      color: #52627e;
    }
    .block {
      border-bottom: 1px solid #D9D9D8;
    }
    .weui-cell {
      padding: 0px;
    }
    .left-line {
      border-left: 1px solid #E7E7E7;
      height: 1rem;
      line-height: 1rem;
      /*padding-left: 0.5rem;*/
      width: 100%;
      position: absolute;
      margin-top: 0.75rem;
    }
    .top-block {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #52627e;
      .iconfont {
        font-size: 1.25rem;
      }
    }
    .top-select {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #00D7C7;
      .iconfont {
        font-size: 1.25rem;
      }
    }
    .scroller {
      background-color: #E3EBF1;
    }
    .check {
      width: 25%;
      box-sizing: border-box;
    }
    .content {
      color: #999999;
      margin-top: 0px;
      background-color: white;
      overflow: hidden;
      width: 100%;
      p {
        width: 100%;
      }
      .picture {
        padding: 15px;
        padding-top: 0px;
        height: 100%;
      }
      .desc {
        padding: 15px;
        font-size: 0.9rem;
        .one {
          font-size: 1rem;
          padding-bottom: 0.2rem;
          color: black;
          span {
            font-size: 0.5rem;
            margin-left: 1.2rem;
          }
        }
      }
    }
    .box1-item {
      width: 200px;
      height: 4.5rem;
      display: inline-block;
      margin-left: 5px;
      float: left;
      text-align: center;
      line-height: 4.5rem;
      .child {
        height: 1.5rem;
        line-height: 1.5rem;
        border: 1px solid #00D7C7;
        background-color: white;
        color: #00D7C7;
        text-align: center;
        border-radius: 0.3rem;
      }
      .childed {
        height: 1.5rem;
        line-height: 1.5rem;
        border: 1px solid #EDEEED;
        background-color: #EDEEED;
        color: #D4D6D7;
        text-align: center;
        border-radius: 0.3rem;
      }
    }
    .box1 {
      height: 4.5rem;
      position: relative;
      width: 3100px;
    }
    .inform-more {
      text-align: center;
    }
  }
</style>

<script>
  import {
    XInput,
    Group,
    XButton,
    Panel,
    Datetime,
    TransferDom,
    Popup,
    Flexbox,
    FlexboxItem,
    Tab,
    TabItem,
    Checker,
    CheckerItem,
    Divider,
    Scroller
  }

  from "vux";

  export default {
    name: "Login",
    type: '1',
    components: {
      XInput,
      XButton,
      Group,
      Panel,
      Datetime,
      Popup,
      Flexbox,
      FlexboxItem,
      Tab,
      TabItem,
      Checker,
      CheckerItem,
      Divider,
      Scroller
    },
    directives: {
      TransferDom
    },
    computed: {
      mytime() {
        let myarry = [];
        if(this.select == "选择") {
          let mydate = new Date();
          let month = mydate.getMonth() + 1;
          let day = mydate.getDate();
          if(month < 10) {
            month = "0" + month
          }
          if(day < 10) {
            day = "0" + day
          }
          let day3 = new Date();
          day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000);
          let ymonth = day3.getMonth() + 1;
          let yday = day3.getDate();
          if(ymonth < 10) {
            ymonth = "0" + ymonth
          }
          if(yday < 10) {
            yday = "0" + yday
          }
          myarry[0] = month + "-" + day;
          myarry[1] = ymonth + "-" + yday;
          myarry[2] = month + "-" + day;
        } else {
          let str = this.select + ' 18:55:49:123';
          let oneday = new Date(str);
          let time1 = Date.parse(oneday);
          let mydate = new Date(time1);
          let month = mydate.getMonth() + 1;
          let day = mydate.getDate();
          if(month < 10) {
            month = "0" + month
          }
          if(day < 10) {
            day = "0" + day
          }
          let day3 = new Date();
          day3.setTime(time1 + 24 * 60 * 60 * 1000);
          let ymonth = day3.getMonth() + 1;
          let yday = day3.getDate();
          if(ymonth < 10) {
            ymonth = "0" + ymonth
          }
          if(yday < 10) {
            yday = "0" + yday
          }
          myarry[0] = month + "-" + day;
          myarry[1] = ymonth + "-" + yday;
          myarry[2] = month + "-" + day;
        }
        return myarry;
      },
      nowtime() {
        let nowdate = new Date();
        let nowmonth = nowdate.getMonth() + 1;
        let nowday = nowdate.getDate();
        if(nowmonth < 10) {
          nowmonth = "0" + nowmonth
        }
        if(nowday < 10) {
          nowday = "0" + nowday
        }
        let myarry = [];
        myarry[0] = nowmonth + "-" + nowday;
        myarry[1] = nowdate.getHours();
        myarry[2] = parseInt(nowdate.getMinutes()) / 15;
        return myarry;
      }
    },
    data() {
      return {
        value1: '2017-10-11',
        value2: '2017-10-24',
        showPopup: false,
        format: 'MM-DD',
        select: '选择',
        timeList: [{
          show: false,
          type: "空闲",
          value: 1
        }, {
          show: false,
          type: "空闲",
          value: 2
        }, {
          show: false,
          type: "空闲",
          value: 3
        }, {
          show: false,
          type: "空闲",
          value: 4
        }],
        tabList: [{
          id: 0,
          select: true
        }, {
          id: 1,
          select: false
        }]
      }
    },
    methods: {
      setToday(value) {
        let now = new Date()
        let cmonth = now.getMonth() + 1
        let day = now.getDate()
        if(cmonth < 10) cmonth = '0' + cmonth
        if(day < 10) day = '0' + day
        this.value7 = now.getFullYear() + '-' + cmonth + '-' + day
        console.log('set today ok')
      },
      selectTab(item) {
        for(let i = 0; i < this.tabList.length; i++) {
          this.tabList[i].select = false;
        }
        item.select = true;
        this.mytime[2] = this.mytime[item.id];
      },
      setTime() {
        for(let i = 0; i < this.tabList.length; i++) {
          this.tabList[i].select = false;
        }
        this.tabList[0].select = true;
      }
    }
  };
</script>
